<template>
    <div class="left">
        <div class="mfh_left_title" >
            <div>医</div>
            <div>院</div>
            <div>概</div>
            <div>括</div>
        </div>
        <div class="mfh">
            <div class="mfh_wrapper">
                <div v-for="(item,index) in details" :key="index" class="mfh_div">
                <div class="mfh_banner">
                    <img :src='item.url'>
                </div>
                <div class="mfh_div_left">
                    <P class="div_left_title">{{item.title}}</P>
                    <p class="div_left_text">{{item.text}}</p>
                    <div class="mfh_left_state">
                        <span>{{item.num}}阅读</span>
                        <span>{{item.time}}</span>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import img from '../assets/图层 15 拷贝.png'
export default {
    data(){
        return {
            details:[
                {url:img,title:"推荐两种泽泻的食用方法有清热祛湿的功效!",text:"泽泻是一种传统的中药材，对于利尿效果非常不错，尤其是搭配各种其他种类的中药治病效果更佳，下面给...",
                num:"149",time:"2020-11-21"},
                {url:img,title:"推荐两种泽泻的食用方法有清热祛湿的功效!",text:"泽泻是一种传统的中药材，对于利尿效果非常不错，尤其是搭配各种其他种类的中药治病效果更佳，下面给...",
                num:"149",time:"2020-11-21"},
                {url:img,title:"推荐两种泽泻的食用方法有清热祛湿的功效!",text:"泽泻是一种传统的中药材，对于利尿效果非常不错，尤其是搭配各种其他种类的中药治病效果更佳，下面给...",
                num:"149",time:"2020-11-21"},
                {url:img,title:"推荐两种泽泻的食用方法有清热祛湿的功效!",text:"泽泻是一种传统的中药材，对于利尿效果非常不错，尤其是搭配各种其他种类的中药治病效果更佳，下面给...",
                num:"149",time:"2020-11-21"},
                {url:img,title:"推荐两种泽泻的食用方法有清热祛湿的功效!",text:"泽泻是一种传统的中药材，对于利尿效果非常不错，尤其是搭配各种其他种类的中药治病效果更佳，下面给...",
                num:"149",time:"2020-11-21"},
            ]
        }
    }
}
</script>
<style scoped>
.left{width:978px;}
.mfh{width:100%;overflow: hidden;background:url('../assets/705001088262418139.png') no-repeat top center,
            url('../assets/705001088262418139.png') no-repeat bottom center;padding-bottom:107px;}
.mfh_left_title{display:flex;justify-content: left;margin-bottom: 30px;border:1px red solid;width:309px;margin:0 auto 59px;}
.mfh_left_title div{width:70px;line-height:70px;background-color:#A40100;text-align: center;border:1px red solid;
                        font-size: 38px;font-family: '楷体';color:white;border-radius:35px;margin-right:10px;}
.mfh_div{width:100%;display:flex;justify-content:space-between;padding:34px 0;}
.mfh_wrapper{margin-top:93px;}
.mfh_banner{width:215px;height:160px;position: relative;}
.mfh_banner img{width:215px;position: fixed;z-index: 999;position: absolute;transition: all 0.1s;}
.mfh_div_left{width:703px;}
.div_left_title{font-size:24px;font-weight: bold;color:#A40000;height:23px;}
.div_left_text{font-size:20px;color:#666666;line-height: 36px;border:1px red solid;height:55px;margin-top:10px;}
.mfh_left_state{width:171px;display:flex;justify-content: space-between;font-size:18px;line-height: 36px;color:#666666;margin-top:20px;}
.mfh_div:hover .mfh_banner img{width:245px;margin-left:-7.5px;margin-top:-7.5px;box-shadow: 0 0 10px #D6BCA7;}
.mfh_div:hover .div_left_title{font-size: 26px;}
.mfh_div:hover .div_left_text{font-size: 22px;}
.mfh_div:hover .div_left_state{font-size: 19px;}
</style>
